<template>
  <div class="editor-layout">
    <div class="editor-header">
      <div class="logo">
        <img src="@/assets/home/huaylogo.png" alt="华衣甄选" class="logo-img" />
        <h1>华衣甄选小程序编辑器</h1>
      </div>
      <div class="nav-menu">
        <router-link to="/editor" class="nav-item" active-class="active">
          <i class="nav-icon el-icon-edit"></i>
          编辑器
        </router-link>
        <router-link to="/editor/components" class="nav-item" active-class="active">
          <i class="nav-icon el-icon-menu"></i>
          组件管理
        </router-link>
        <a class="nav-item" @click="goToWebsite">
          <i class="nav-icon el-icon-back"></i>
          返回官网
        </a>
      </div>
      <div class="actions">
        <button class="action-btn preview-btn" @click="previewApp" title="预览效果">
          <i class="preview-icon el-icon-view"></i>
          预览
        </button>
        <button class="action-btn save-btn" @click="saveTemplate" title="保存模板">
          <i class="save-icon el-icon-folder-checked"></i>
          保存
        </button>
        <button class="action-btn publish-btn" @click="publishApp" title="发布应用">
          <i class="publish-icon el-icon-upload2"></i>
          发布
        </button>
      </div>
      <div class="user-info">
        <el-dropdown>
          <span class="user-dropdown">
            管理员 <i class="el-icon-arrow-down"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人设置</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="editor-main">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();

const goToWebsite = () => {
  router.push('/official-website');
};

// 预览应用
const previewApp = () => {
  ElMessage.success('预览功能即将上线');
};

// 保存模板
const saveTemplate = () => {
  ElMessage.success('模板保存成功');
};

// 发布应用
const publishApp = () => {
  ElMessage.success('应用发布成功');
};
</script>

<style lang="scss" scoped>
.editor-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f9fb;
  
  .editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    padding: 0 25px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 10;
    
    .logo {
      display: flex;
      align-items: center;
      
      .logo-img {
        height: 38px;
        margin-right: 12px;
        transition: transform 0.3s ease;
        
        &:hover {
          transform: scale(1.05);
        }
      }
      
      h1 {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 0;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          width: 0;
          height: 2px;
          background: linear-gradient(to right, #8B4513, rgba(139, 69, 19, 0.5));
          bottom: -4px;
          left: 0;
          transition: width 0.3s ease;
        }
        
        &:hover::after {
          width: 100%;
        }
      }
    }
    
    .nav-menu {
      display: flex;
      gap: 24px;
      
      .nav-item {
        display: flex;
        align-items: center;
        font-size: 15px;
        color: #555;
        text-decoration: none;
        padding: 8px 15px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
        overflow: hidden;
        
        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 2px;
          background: linear-gradient(to right, #8B4513, rgba(139, 69, 19, 0.5));
          bottom: 0;
          left: -100%;
          transition: left 0.3s ease;
        }
        
        .nav-icon {
          margin-right: 8px;
          font-size: 16px;
          transition: transform 0.3s ease;
        }
        
        &:hover {
          color: #8B4513;
          background-color: rgba(139, 69, 19, 0.05);
          
          &::before {
            left: 0;
          }
          
          .nav-icon {
            transform: translateY(-2px);
          }
        }
        
        &.active {
          color: #8B4513;
          background-color: rgba(139, 69, 19, 0.08);
          font-weight: 500;
          
          &::before {
            left: 0;
          }
        }
      }
    }
    
    .actions {
      display: flex;
      gap: 12px;
      
      .action-btn {
        padding: 9px 18px;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        border: none;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
          );
          transition: left 0.8s ease;
        }
        
        &:hover::before {
          left: 100%;
        }
        
        i {
          margin-right: 8px;
          font-size: 16px;
          transition: transform 0.2s ease;
        }
        
        &:hover i {
          transform: scale(1.1);
        }
        
        &:active {
          transform: translateY(1px);
        }
        
        &.preview-btn {
          background-color: #f0f2f5;
          color: #333;
          
          &:hover {
            background-color: #e0e2e5;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
          }
        }
        
        &.save-btn {
          background-color: #e6f7ff;
          color: #1890ff;
          
          &:hover {
            background-color: #cce9ff;
            box-shadow: 0 3px 8px rgba(24, 144, 255, 0.2);
          }
        }
        
        &.publish-btn {
          background: linear-gradient(135deg, #8B4513, #a0522d);
          color: #fff;
          
          &:hover {
            background: linear-gradient(135deg, #a0522d, #8B4513);
            box-shadow: 0 3px 12px rgba(139, 69, 19, 0.3);
          }
        }
      }
    }
    
    .user-info {
      .user-dropdown {
        cursor: pointer;
        font-size: 15px;
        color: #333;
        display: flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 20px;
        transition: all 0.3s ease;
        
        &:hover {
          background-color: #f9f9f9;
          color: #8B4513;
        }
        
        i {
          margin-left: 6px;
        }
      }
    }
  }
  
  .editor-main {
    flex: 1;
    overflow: auto;
  }
}
</style> 